<template>
   <div class="container">
       <div class="main">
           <div class="avt"><img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" width="100px" height="100px" class="logo"></div>
           <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="0px" class="demo-ruleForm">
               <el-form-item  prop="username">
                   <el-input type="text" v-model="loginForm.username"  placeholder="请输入账号！" prefix-icon="el-icon-user" autocomplete="off"> </el-input>
               </el-form-item>
               <el-form-item  prop="password">
                   <el-input type="password" v-model="loginForm.password"  placeholder="请输入密码" prefix-icon="el-icon-lock" autocomplete="off" show-password ></el-input>
               </el-form-item>
               <el-form-item>
                   <el-button type="primary" size="medium" style="width: 100%" @click="submitForm('loginForm')">登  录</el-button>
               </el-form-item>
           </el-form>
       </div>
   </div>
</template>

<script>
import loginApi from "@/api/login"
import userApi from "@/api/user"
    export default {
        data() {
            var validateUsername = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('账号不能为空'));
                }else if(value.length >15){
                    return callback(new Error('输入长度超限制了哦！'));
                }else {
                    callback();
                }


            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    return callback(new Error('请输入密码'));
                }else {
                    callback();
                }
            };
            return {
                loginForm: {
                    username: '',
                    password: '',
                },
                rules: {
                    username: [
                        { validator: validateUsername, trigger: 'blur' }
                    ],
                    password: [
                        { validator: validatePass, trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {     
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        userApi.getByUserName(this.loginForm.username).then(res =>{
                           this.$store.commit('SET_USER',res.data.data)
                       })
                       loginApi.getLogin(this.loginForm.username,this.loginForm.password).then(res =>{
                           this.$store.commit('SET_TOKEN',res.data)
                           this.$router.push('/')
                       })
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .container{
        background-color: rgb(48,65,86);
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .main{
        width: 350px;
        height: 250px;
        padding: 64px 15px 15px 15px;
        border-radius: 5px;
        box-sizing: border-box;
        margin: 250px auto;
        background-color: rgba(255,255,255,2);
    }
    .avt{
        position: relative;
        width: 0;
        height: 0;
    }
    .logo{
        border-radius: 50%;
        box-shadow: 0px 0px 20px 5px #0ff;
        position: absolute;
        top: -132px;
        left: 100px;
    }
</style>